<template>
  <a-row>
    <a-col :span="6">
      <img-viewer :src="dataSource.first_picture" defaultImgType="other" :encrypt-confirmed="false" />
    </a-col>
    <a-col :span="18">
      <descriptions :columns="columns.slice(0, 4)" :data-source="dataSource" :col-span="24" />
    </a-col>
  </a-row>
  <descriptions :columns="columns.slice(4)" :data-source="dataSource" :col-span="24" style="margin-top: 15px" />
</template>

<script>
import { shopDetails } from '@gis/lib/api';
import ImgViewer from '@gis/lib/components/img-viewer/index.vue';
import { handleCommonRes } from '@gis/lib/utils/resolver.js';
export default {
  name: 'shop-details',
  components: {
    ImgViewer,
  },
  props: {
    details: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      dataSource: {},
      columns: [
        { label: '商家名称', key: 'name' },
        { label: '商家类型', key: 'around_p_type_name' },
        { label: '联系人', key: 'person' },
        { label: '联系电话', key: 'phone' },
        { label: '地址', key: 'business_address' },
        { label: '简介', key: 'remark' },
      ],
    };
  },
  mounted() {
    this.getDataAsync();
  },
  methods: {
    async getDataAsync() {
      const data = await handleCommonRes(shopDetails, { around_id: this.details.around_id });
      this.dataSource = data;
    },
  },
};
</script>

<style scoped lang="less"></style>
